import React, { PureComponent } from 'react';
import './index.css';
class Parent extends PureComponent {
    state = { carName: 'c63' };

    changeCar = () => {
        this.setState({ carName: '迈巴赫' });
    };

    // 阀门 没有更新的时候就不要render
    // 实际开发中不用自己实现阀门，通过PureComponent来控制
    /* shouldComponentUpdate(nextProps,nextState){
        return this.state.carName !== nextState.carName
    } */

    render() {
        const { carName } = this.state;
        console.log('Parent---render');
        return (
            <div className="parent">
                <h3>我是Parent组件</h3>
                <span>我的车名字是：{carName}</span><br/>
                <button onClick={this.changeCar}>点我换车</button>
                <Child carName={carName}/>
            </div>
        );
    }
}

class Child extends PureComponent {

    // 阀门 没有更新的时候就不要render
    /* shouldComponentUpdate(nextProps,nextState){
        return this.props.carName !== nextProps.carName
    } */


    render() {
        console.log('Child---render');

        const {carName} = this.props
        return (
            <div className="child">
                <h3>我是Child组件</h3>
                <span>我接到的车名字是：{carName}</span>

            </div>
        );
    }
}

export default Parent;
